<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户信息数据展示</title>
    <link href="http://localhost:8080/static/layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            padding: 6px 16px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="demoTable">
    <form class="layui-form" action="javascript:;">
        用户名称：
        <div class="layui-inline">
            <input class="layui-input" name="loginName" id="loginName" autocomplete="off" style="width: 100px;">
        </div>
        手机号码：
        <div class="layui-inline">
            <input class="layui-input" name="phoneNumber" id="phoneNumber" autocomplete="off" style="width: 120px;">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态选择: </label>
            <div class="layui-input-inline" style="width: 100px;">
                <select name="status" id="status">
                    <option value="">请选择</option>
                    <option value="0">正常</option>
                    <option value="1">停用</option>
                </select>
            </div>
        </div>
        <div class="layui-form" style="display: inline-block;margin-top: 10px; ">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-inline" id="test6" style="width: 260px;">
                        <div class="layui-input-inline" style="width: 110px;">
                            <input type="text" autocomplete="off" name="startTime" id="test-startDate-1"
                                   class="layui-input"
                                   placeholder="开始日期" style="width: 100px;">
                        </div>
                        <div class="layui-form-mid" style="width: 10px;">-</div>
                        <div class="layui-input-inline" style="width: 110px;">
                            <input type="text" autocomplete="off" name="endTime" id="test-endDate-1" class="layui-input"
                                   placeholder="结束日期" style="width: 100px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="layui-btn" data-type="reload" id="search">搜索</button>
    </form>
</div>
<div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-panel" style="width: 200px;">
                <div style="padding: 1px 1px;"><table class="layui-hide" id="menu" lay-filter="menu"></table></div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-panel">
                <div style="padding: 50px 30px;">
                    <table class="layui-hide" id="demo" lay-filter="test"></table>

                </div>
            </div>
        </div>
    </div>
</div>

<!--<table class="layui-hide" id="demo" lay-filter="test"></table>-->

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>


<div class="layui-tab layui-tab-brief" lay-filter="demo">

    <div class="layui-tab-content">
        <div class="layui-tab-item">
            <div id="laydateDemo"></div>
        </div>
        <div class="layui-tab-item">
            <div id="pageDemo"></div>
        </div>
        <div class="layui-tab-item">
            <div id="sliderDemo" style="margin: 52px 18px;"></div>
        </div>
    </div>
</div>


<script src="http://localhost:8080/static/layui/layui.js"></script>
<script src="http://localhost:8080/static/layui/treetable-lay/treeTable.js"></script>
<script src="http://localhost:8080/static/layui/js/jquery-3.6.3.js"></script>
<script>

    //用于查询部门名称
    function selectDept(deptId) {
        $.ajax({
            url: "http://localhost:8080/sysDept/selectAllDept.do",
            data: {"deptId": deptId},
            success: function (res) {
                //console.log(res);
                let dept = res.data[0];
                $("[name= 'deptName']").val(dept.deptName);
            },
            error: function () {
                console.log("err...");
            }
        });
    }

    layui.use(function () {
        // 得到需要的内置组件
        let layer = layui.layer; //弹层
        let laypage = layui.laypage; //分页
        let laydate = layui.laydate; //日期
        let table = layui.table; //表格
        let slider = layui.slider; //滑块
        let dropdown = layui.dropdown; //下拉菜单

        // 执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 420
            , url: 'http://localhost:8080/sysUser/selectAllUser.do' //数据接口（此处为静态数据，仅作演示）
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , limit: 10  //每页显示行数
            , limits: [10, 20, 30]  //分页下拉框参数组
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'userId', title: '用户编号', width: 120, sort: true, fixed: 'left'}
                , {field: 'loginName', title: '用户名称', width: 120}
                , {
                    field: 'userName',
                    title: '用户昵称',
                    width: 120,
                    sort: true,
                    totalRow: '{{= d.TOTAL_NUMS }}'
                }
                , {field: 'deptName', title: '部门', width: 120, sort: true}
                , {field: 'phoneNumber', title: '手机号码', width: 150}
                , {field: 'status', title: '状态', width: 120}
                , {field: 'createTime', title: '创建时间', width: 200}
                , {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'}
            ]],
            id: "testReload",//写其他事件时，刷新回显table表格数据，调用其方法
            where: {
                loginName: $("#loginName").val(),
                phoneNumber: $("#phoneNumber").val(),
                status: $("#status").val(),
                startTime: $("[name='startTime']").val(),
                endTime: $("[name='endTime']").val(),
            }
        });

        //搜索
        $("#search").on('click', function () {
            let searchLoginName = $("#loginName").val();
            let searchPhoneNumber = $('#phoneNumber').val();
            let searchStatus = $("#status").val();
            let searchStartTime = $("[name='startTime']").val();
            let searchEndTime = $("[name='endTime']").val();
            table.reload('testReload', {
                page: {
                    curr: 1//重新从第一页开始
                },
                where: {
                    loginName: searchLoginName,
                    phoneNumber: searchPhoneNumber,
                    status: searchStatus,
                    startTime: searchStartTime,
                    endTime: searchEndTime,
                },
            });
            //重加载后，重新赋值上次搜索的内容
            $('loginName').val(searchLoginName);
            $('phoneNumber').val(searchPhoneNumber);
            $('status').val(searchStatus);
            $('startTime').val(searchStartTime);
            $('endTime').val(searchEndTime);
        });

        // table行内编辑  ***
        table.on('edit(test)', function (obj) {
            console.log(obj.data);
            console.log(obj.value);
            console.log(obj.field);
            $.ajax({
                url: "http://localhost:8080/sysUser/updateUser.do",
                data: obj.data,
                success: function (res) {
                    console.log(res);
                    // parent.location.reload();
                },
                error: function () {
                    console.log("table.on('edit(test)' err....");
                }
            });
        });


        // 头工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,//页面
                        title: "添加",
                        area: ["60%", "80%"],
                        content: 'http://localhost:8080/static/user/layui_user_add.html'
                    })
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        //layer.alert('编辑 [id]：' + checkStatus.data[0]);
                        layer.open({
                            type: 2,//页面
                            title: "编辑",
                            area: ["60%", "80%"],
                            content: 'http://localhost:8080/static/user/layui_user_update.html?userId=' + checkStatus.data[0].userId
                        })
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //layer.msg('删除');
                        layer.confirm('真的删除行么', function (index) {
                            //obj.del(); //删除对应行（tr）的DOM结构
                            //layer.close(index);
                            //向服务端发送删除指令
                            //layer.msg(JSON.stringify(data));
                            $.ajax({
                                url: "http://localhost:8080/sysUser/deleteUser.do",
                                data: {"userId": checkStatus.data[0].userId},
                                type: "post",
                                success: function (res) {
                                    console.log(res);
                                    if (res == 1) {
                                        //添加成功，关闭当前弹窗层
                                        layer.msg("删除成功");
                                        window.location.href = "http://localhost:8080/sysUser/user.do";

                                    } else {
                                        layer.msg("删除失败");
                                    }
                                    window.location.href = "http://localhost:8080/sysUser/user.do";
                                },
                                error: function () {
                                    console.log("err....");
                                }
                            });
                        });
                    }
                    break;
            }
            ;
        });

        // 单元格工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                //layer.msg('查看操作');
                //layer.msg(data.toString());//string字符内容
                layer.msg(JSON.stringify(data));//json格式
            } else if (layEvent === 'more') {
                //下拉菜单
                dropdown.render({
                    elem: this //触发事件的 DOM 对象
                    , show: true //外部事件触发即显示
                    , data: [{
                        title: '编辑'
                        , id: 'edit'
                    }, {
                        title: '删除'
                        , id: 'del'
                    }]
                    , click: function (menudata) {
                        if (menudata.id === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                //obj.del(); //删除对应行（tr）的DOM结构
                                //layer.close(index);
                                //向服务端发送删除指令
                                //layer.msg(JSON.stringify(data));
                                $.ajax({
                                    url: "http://localhost:8080/sysUser/deleteUser.do",
                                    data: data,
                                    type: "post",
                                    success: function (res) {
                                        console.log(res);
                                        if (res == 1) {
                                            //添加成功，关闭当前弹窗层
                                            layer.msg("删除成功");
                                            window.location.href = "http://localhost:8080/sysUser/user.do";

                                        } else {
                                            layer.msg("删除失败");
                                        }
                                        window.location.href = "http://localhost:8080/sysUser/user.do";
                                    },
                                    error: function () {
                                        console.log("err....");
                                    }
                                });
                            });
                        } else if (menudata.id === 'edit') {
                            //layer.msg('编辑操作，当前行 ID:'+ data.postId);
                            layer.open({
                                type: 2,//页面
                                title: "编辑",
                                area: ["60%", "80%"],
                                content: 'http://localhost:8080/static/user/layui_user_update.html?userId=' + data.userId
                            })
                        }
                    }
                    , align: 'right' //右对齐弹出
                    , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                })
            }
        });

        // 分页
        // laypage.render({
        //     elem: 'pageDemo' //分页容器的id
        //     , count: 1000 //数据总数
        //     , limit: 5 //每页显示的数据条数
        //     , skin: '#1E9FFF' //自定义选中色值
        //     //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
        //     , jump: function (obj, first) {
        //         if (!first) {
        //             layer.msg('第' + obj.curr + '页', {offset: 'b'});
        //         }
        //         $.ajax({
        //             url: "",
        //             data: {"page": obj.curr, "limit": 3},
        //             success: function (res) {
        //                 console.log(res);
        //                 //parent.location.reload();
        //             },
        //             error: function () {
        //                 console.log(" err....");
        //             }
        //         });
        //     },
        //
        // });


        //时间搜索
        layui.use('laydate', function () {
            let laydate = layui.laydate;

            //日期范围
            laydate.render({
                elem: '#test6'
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                , range: ['#test-startDate-1', '#test-endDate-1']
            });
        });
    });
</script>

<script>
    layui.use(['treeTable', 'layer'], function () {
        let layer = layui.layer;
        let treetable = layui.treeTable;
        //渲染表格
        let renderTable = function () {
            layer.load(2);  //加载层
            treetable.render({
                elem: '#menu',
                url: 'http://localhost:8080/sysDept/selectAllDept.do',
                height: '500',
                method: 'get',
                where: {
                    name: $("#name").val()
                },
                tree: {
                    iconIndex: 0,
                    isPidData: true,
                    idName: 'deptId',//父ID
                    pidName: 'parentId',//子ID
                    openName: 'open',// 是否默认展开的字段名
                    treeDefaultClose: false,//是否默认折叠
                    treeLinkage: false,		//父级展开时是否自动展开所有子级
                    //public bool open { get; set; }open字段是bool类型
                },
                page: false,
                cols: [[

                    {field: 'deptName', title: '部门名称', width: 194},

                ]],
                style: 'margin-top:0;',
                //数据渲染完的回调
                done: function () {
                    //关闭加载
                    layer.closeAll('loading');
                },
            })
        };
        renderTable();
    });
</script>

</body>
</html>
